<template>
	<view class="content">
		<view class="" style="background-color: #fff;">
			<u-tabs lineWidth="30" lineColor="#7D81A9" :activeStyle="{
            color: '#7D81A9',
            fontWeight: 'bold',
            transform: 'scale(1)'
        }" :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }" itemStyle="width:360rpx; height: 70rpx;" :list="list1" @click="click"></u-tabs>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in  form" :key="index"  @tap="goDetail(item.order_sn)">
				<image v-if="item.order_state == '进行中'" class="stateImg" src="../../static/img/Slice 43.png"></image>
				<image v-if="item.order_state == '已完成'" class="stateImg" src="../../static/img/Slice 44.png"></image>
				<image v-if="item.order_state == '已取消'" class="stateImg" src="../../static/img/Slice 45.png"></image>
				<view class="stateBox" v-if="item.order_state == '已结束'" >
				  已结束
				</view>
				<view class="itemContent">
					<view class="title">
						<view class="name">
							{{item.shop_name}}
						</view>
						<view class="money">
							<span style="font-size: 24rpx;">￥{{item.price}}</span>
						</view>
					</view>
					<view class="lableBoxS">
						<view style="background-color: #DDE3F9;">
							{{item.city_data}}
						</view>
						<view style="background-color: #FFDFC1;">
							{{item.category_name}}
						</view>
						<view style="background-color: #CAE5BD;">
							{{item.content_type_name}}
						</view>
					</view>
					<view class="time">
						截止：{{item.recruit_end_time}}
					</view>
					<view class="bottomBox">
						<view class="avatar">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="userName">
							{{item.nickname}}
						</view>
						<view class="identityBoxS" v-for="(item1,index1) in item.identity_type" :key="index1">
							<view class="">
								<image src="../../static/img/Frame 84.png" v-if="item1 == '商家'" mode=""></image>
								<image src="../../static/img/Frame 4.png" v-if="item1 == '达人'" mode=""></image>
								<image src="../../static/img/Frame 85.png" v-if="item1 == '团长'" mode=""></image>

							</view>
						</view>
						<view class="btnS">
							<image class="shareImg" src="../../static/img/Frame.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="listaaa">
			<view class="item" v-for="(item,index) in form1" :key="index"  @tap="goDetailTwo(item.id)">
		
				<image class="stateImg" src="../../static/img/Slice 75.png" mode=""></image>
		
				<view class="itemContent">
					<view class="title">
						<view class="name">
							{{item.dy_nickname}}
							<image src="../../static/img/man.png" mode=""></image>
						</view>
						<view class="btns">
							<view class="btn">
								已邀约
							</view>
							<view class="frame">
								<image src="../../static/img/Frame.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="bottomBox">
						<view class="avatar">
							<image src="../../static/img/Slice 40.png" mode=""></image>
						</view>
						<view class="userId">
							抖音ID:{{item.dy_id}}
							<image class="copyImg" src="../../static/img/copy.png" mode=""></image>
						</view>
						<view class="">
		
						</view>
					</view>
					<view class="lableBoxS">
						<view style="background-color: #DDE3F9;">
							{{item.city}}{{item.area}}
						</view>
						<view style="background-color: #FFDFC1;" v-for="(item1,index1) in item.category_data">
							{{item1}}
						</view>
						<!-- <view style="background-color: #CAE5BD;">
							素材直播
						</view> -->
					</view>
					<view class="numbers">
						<view class="numberBox">
							<view class="lable">
								粉丝
							</view>
							<view class="num">
								{{item.fans_num}}
							</view>
						</view>
						<view class="numberBox" style="text-align: center;">
							<view class="lable">
								内容力等级
							</view>
							<view class="num golden">
								Lv{{item.sales_level}}
							</view>
						</view>
						<view class="numberBox" style="text-align: right;">
							<view class="lable">
								带货力等级
							</view>
							<view class="num golden">
								Lv{{item.content_level}}
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				form: [],
				form1: [],
				value: '',
				list1: [{
					name: '商单',
				}, {
					name: '达人',
				}]
			};
		},
		async created() {
			const res = await uni.$http.post('user/my_collect')
			console.log('5555', res.data.data);
			this.form = res.data.data
		},
		methods: {
			async click(e) {
				console.log(e.index);
				if (e.index == 0) {
					const obj = {
						type: 1
					}
					const res = await uni.$http.post('user/my_collect', obj)
					console.log('5555', res.data.data);
					this.form = res.data.data
					this.form1 =[]
				} else {
					const obj = {
						type: 2
					}
					const res = await uni.$http.post('user/my_collect', obj)
					console.log('5555', res.data.data);
					this.form1 = res.data.data
					this.form =[]
				}
			},
      // 跳转商单详情
      goDetail(order_sn) {
        uni.navigateTo({
          url: '/pages/orderDetails/orderDetails?order_sn=' + order_sn
        })
      },
      // 跳转达人详情
      goDetailTwo(id) {
        uni.navigateTo({
          url: '/pages/people/drxxxq?id=' + id
        })
      },
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: #F2F3F6;

		.listaaa {
			.item {
				width: 686rpx;
				// height: 294rpx;
				padding-bottom: 26rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 24rpx auto;

				.stateImg {
					width: 92rpx;
					height: 36rpx;
				}
        .stateBox {
          width: 92rpx;
          height: 36rpx;
          text-align: center;
          line-height: 28rpx;
          border-radius: 16rpx 0 16rpx 0;
          background-color: #BEC0D4;
          font-size: 18rpx;
          color:#fff;
        }

				.itemContent {
					padding: 18rpx 22rpx 0 24rpx;

					.title {
						display: flex;
						align-items: center;

						.name {
							flex: 1;
							width: 380rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							image {
								display: inline-block;
								width: 24rpx;
								height: 24rpx;
								margin-left: 8rpx;
							}
						}

						.btns {

							display: flex;
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;

							.btn {
								width: 128rpx;
								height: 52rpx;
								line-height: 52rpx;
								text-align: center;
								background: #7D81A9;
								border-radius: 40rpx;
								margin-right: 16rpx;
							}

							.frame {
								width: 52rpx;
								height: 52rpx;

								image {
									width: 52rpx;
									height: 52rpx;
								}
							}
						}
					}

					.lableBoxS {
						display: flex;
						color: rgba(0, 0, 0, 0.6);
						font-size: 20rpx;
						margin-top: 20rpx;
						margin-bottom: 18rpx;

						view {
							height: 32rpx;
							line-height: 32rpx;
							padding: 0 12rpx;
							margin-right: 8rpx;
						}
					}

					.numbers {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.numberBox {
							width: 33%;
							display: flex;
							align-items: center;
							text-align: center;
						}

						.lable {
							font-size: 24rpx;
							color: #6E7480;
						}

						.num {
							font-size: 32rpx;
							color: #000000;
						}

						.golden {
							font-size: 32rpx;
							color: #EAA04A;
						}
					}

					.bottomBox {
						display: flex;
						align-items: center;
						height: 52rpx;
						margin-top: 14rpx;

						.avatar {
							width: 44rpx;
							height: 44rpx;
							border-radius: 22rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.userId {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: #6E7480;
							margin: 0 8rpx;

							.copyImg {
								width: 28rpx;
								height: 28rpx;
								margin-left: 8rpx;
							}
						}

						.btnS {
							display: flex;

							.btn {
								width: 128rpx;
								height: 52rpx;
								line-height: 52rpx;
								text-align: center;
								background: #7D81A9;
								border-radius: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								margin-right: 16rpx;
							}

							.shareImg {
								width: 52rpx;
								height: 52rpx;
							}
						}
					}
				}
			}
		}



		.list {
			.item {
				width: 686rpx;
				height: 294rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 24rpx auto;

				.stateImg {
					width: 92rpx;
					height: 36rpx;
				}

				.itemContent {
					padding: 0 22rpx 0 24rpx;

					.title {
						display: flex;
						align-items: center;

						.name {
							width: 380rpx;
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.money {
							flex: 1;
							text-align: right;
							color: #EAA04A;
							font-size: 36rpx;
						}
					}

					.lableBoxS {
						display: flex;
						color: rgba(0, 0, 0, 0.6);
						font-size: 20rpx;
						margin-top: 14rpx;
						margin-bottom: 18rpx;

						view {
							height: 32rpx;
							line-height: 32rpx;
							padding: 0 12rpx;
							border-radius: 22rpx;
							margin-right: 8rpx;
						}
					}

					.time {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.6);
						margin-bottom: 24rpx;
					}

					.bottomBox {
						display: flex;
						align-items: center;
						height: 52rpx;

						.avatar {
							width: 36rpx;
							height: 36rpx;
							border-radius: 18rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.userName {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							color: rgba(0, 0, 0, 0.6);
							margin: 0 8rpx;
						}

						.identityBoxS {
							flex: 1;

							image {
								width: 52rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}
						}

						.btnS {
							display: flex;

							.btn {
								width: 128rpx;
								height: 52rpx;
								line-height: 52rpx;
								text-align: center;
								background: #7D81A9;
								border-radius: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
								margin-right: 16rpx;
							}

							.shareImg {
								width: 52rpx;
								height: 52rpx;
							}
						}
					}
				}
			}
		}


	}
</style>